<template>
  <div>
    <el-tabs v-model="tabActiveName">
      <el-tab-pane label="坡度坡向" name="first">
        <el-form ref="formSlope"  label-width="80px" size="mini">
          <el-form-item label="最小坡度">
            <el-input-number  v-model="formSlope.minimumGrade" :min="0" :max="90" style="width: 241px" @change="slopChange"/>
          </el-form-item>
          <el-form-item label="最大坡度">
            <el-input-number  v-model="formSlope.maximumGrade" :min="0" :max="90" style="width: 241px"  @change="slopChange"/>
          </el-form-item>
          <el-form-item label="填充样式">
            <el-select id="showMode" v-model="formSlope.displayStyle" style="width: 241px" @change="slopChange">
              <el-option label="显示填充颜色" value="ShowFillColor"/>
              <el-option label="显示坡向箭头" value="ShowSlopeArrow"/>
              <el-option label="显示颜色和坡向箭头" value="ShowColorArrow"/>
            </el-select>
          </el-form-item>
          <el-form-item label="透明度">
            <el-input-number id="trans" v-model="formSlope.transparency" :min="0" :max="100" style="width: 241px" @change="slopChange"/>
          </el-form-item>
          <el-form-item style="text-align: right">
            <div style="width: 241px">
              <el-button type="primary" @click="slopeAnalysis">分析</el-button>
              <el-button @click="slopeAnalysisCancel">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="等值线" name="second">
        <el-form ref="formIsoline"  label-width="138px" size="mini">
          <el-form-item label="最大可见高度（米）">
            <el-input-number v-model="formIsoline.maximumVisibleElevation" :min="0" style="width: 183px" @change="sceneTool.isolineAnalysis.changeFillmaxHeight(formIsoline.maximumVisibleElevation)"/>
          </el-form-item>
          <el-form-item label="最小可见高度（米）">
            <el-input-number v-model="formIsoline.minimumVisibleElevation" :min="0" style="width: 183px" @change="sceneTool.isolineAnalysis.changeFillminHeight(formIsoline.minimumVisibleElevation)"/>
          </el-form-item>
          <el-form-item label="等值距（米）">
            <el-input-number v-model="formIsoline.isolineInterval" :min="10" :step="10" style="width: 183px" @change="sceneTool.isolineAnalysis.changeEquivalent(formIsoline.isolineInterval)"/>
          </el-form-item>
          <el-form-item label="颜色表">
            <el-color-picker v-model="formIsoline.lineColor" @change="sceneTool.isolineAnalysis.changeColor(formIsoline.lineColor)"/>
          </el-form-item>
          <el-form-item label="显示模式">
            <el-select v-model="formIsoline.displayMode" style="width: 183px;" @change="sceneTool.isolineAnalysis.changeFillOption(formIsoline.displayMode)">
              <el-option label="等高线填充" value="Line"/>
              <el-option label="登高面填充" value="Region"/>
              <el-option label="登高线面填充" value="Line_Region"/>
            </el-select>
          </el-form-item>
          <el-form-item style="text-align: right">
            <div style="width: 183px">
              <el-button type="primary" @click="isolineAnalysis">分析</el-button>
              <el-button @click="isolineAnalysisCancel">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="淹没" name="third">
        <el-form ref="formFlood" :model="formFlood" label-width="138px" size="mini">
          <el-form-item label="最大可见高程（米）">
            <el-input-number v-model="formFlood.maximumVisibleElevation" :min="0" style="width: 183px"/>
          </el-form-item>
          <el-form-item label="最小可见高程（米）">
            <el-input-number v-model="formFlood.minimumVisibleElevation" :min="0" style="width: 183px"/>
          </el-form-item>
          <el-form-item label="透明度">
            <el-input-number v-model="formFlood.transparency" :min="0" :max="100" style="width: 183px"/>
          </el-form-item>
          <el-form-item label="当前高度（米）">
            <el-input-number v-model="formFlood.theCurrentLevel" :min="0" style="width: 183px"/>
          </el-form-item>
          <el-form-item label="速度（m/s）">
            <el-input-number v-model="formFlood.speed" style="width: 183px"/>
          </el-form-item>
          <el-form-item style="text-align: right">
            <div style="width: 183px">
              <el-button type="primary" @click="floodAnalysis">分析</el-button>
              <el-button @click="floodAnalysisCancel">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="通视" name="four">
        <el-form ref="formSightline" :model="formSightline" label-width="138px" size="mini">
          <el-form-item label="观察者信息（经度、纬度、高程）">
            <el-input id="formSightlineobserverInformation" v-model="formSightline.observerInformation" readonly style="line-height: 55px;width: 183px"/>
          </el-form-item>
          <el-form-item label="可见区域颜色">
            <el-color-picker v-model="formSightline.visibleColor" @change="sceneTool.sightlineAnalysis.changeVisibleColor(formSightline.visibleColor)"/>
          </el-form-item>
          <el-form-item label="不可见颜色">
            <el-color-picker v-model="formSightline.hideenColor" @change="sceneTool.sightlineAnalysis.changeHiddenColor(formSightline.hideenColor)"/>
          </el-form-item>
          <el-form-item label="障碍物高亮颜色">
            <el-color-picker v-model="formSightline.highlightBarrierColor" @change="sceneTool.sightlineAnalysis.highlightBarrier(formSightline.highlightBarrierColor)"/>
          </el-form-item>
          <el-form-item label-width="0" style="text-align: right">
            <div style="margin-right: 10px">
              <el-button type="primary" @click="sightlineAnalysis">分析</el-button>
              <el-button type="warning" @click="sightlineHighlightBarrier">高亮障碍物</el-button>
              <el-button @click="sightlineAnalysisCancel">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="可视域" name="five">
        <el-form ref="formViewshed3D" :model="formViewshed3D" label-width="138px" size="mini">
          <el-form-item label="观察者信息（经度、纬度、高程）">
            <el-input v-model="formViewshed3D.observerInformation" readonly style="line-height: 55px;width: 183px"/>
          </el-form-item>
          <el-form-item label="附加高程（米）">
            <el-input-number v-model="formViewshed3D.additionalHeight" style="width: 183px" @change="sceneTool.viewshed3DAnalysis.changeAdditionalHeight(formViewshed3D.additionalHeight)"/>
          </el-form-item>
          <el-form-item label="可见距离（米）">
            <el-input-number v-model="formViewshed3D.visualRange" :min="1" style="width: 183px" @change="sceneTool.viewshed3DAnalysis.changeVisualRange(formViewshed3D.visualRange)"/>
          </el-form-item>
          <el-form-item label="方位角（度）">
            <el-input-number v-model="formViewshed3D.directionAngle" :min="0" :max="360" style="width: 183px" @change="sceneTool.viewshed3DAnalysis.changeDirectionAngle(formViewshed3D.directionAngle)"/>
          </el-form-item>
          <el-form-item label="俯仰角（度）">
            <el-input-number v-model="formViewshed3D.elevationAngle" :min="-90" :max="90" style="width: 183px" @change="sceneTool.viewshed3DAnalysis.changeElevationAngle(formViewshed3D.elevationAngle)"/>
          </el-form-item>
          <el-form-item label="水平视角（度）">
            <el-input-number v-model="formViewshed3D.horizontalFov" :min="1" :max="120" style="width: 183px" @change="sceneTool.viewshed3DAnalysis.changeHorizontalFov(formViewshed3D.horizontalFov)"/>
          </el-form-item>
          <el-form-item label="垂直视角（度）">
            <el-input-number v-model="formViewshed3D.verticalFov" :min="1" :max="90" style="width: 183px" @change="sceneTool.viewshed3DAnalysis.changeVerticalFov(formViewshed3D.verticalFov)"/>
          </el-form-item>
          <el-form-item label="可见区域颜色">
            <el-color-picker v-model="formViewshed3D.visibleColor" @change="sceneTool.viewshed3DAnalysis.changeVisibleAreaColor(formViewshed3D.visibleColor)"/>
          </el-form-item>
          <el-form-item label="不可见区域颜色">
            <el-color-picker v-model="formViewshed3D.invisibleColor" @change="sceneTool.viewshed3DAnalysis.changeHiddenAreaColor(formViewshed3D.invisibleColor)"/>
          </el-form-item>
          <el-form-item style="text-align: right">
            <div style="width: 183px">
              <el-button type="primary" @click="viewshed3DAnalysis">分析</el-button>
              <el-button @click="viewshed3DAnalysisCancel">清除</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="剖面" name="six">
        <el-form ref="formProfile" :model="formProfile" label-width="125px" size="mini">
          <el-form-item label="起点信息（经度、纬度、高程）">
            <el-input v-model="formProfile.startingInformation" readonly style="line-height: 55px;width: 195px"/>
          </el-form-item>
          <el-form-item label="终点信息（经度、纬度、高程）">
            <el-input v-model="formProfile.endInformation" readonly style="line-height: 55px;width: 195px"/>
          </el-form-item>
          <el-form-item style="text-align: right">
            <div style="width: 195px">
              <el-button type="primary" @click="profileAnalysis">分析</el-button>
              <el-button @click="profileAnalysisCancel">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="天际线" name="seven">
        <el-form ref="formSkyline" :model="formSkyline" label-width="138px" size="mini">
          <el-form-item label="观察者信息（经度、纬度、高程）">
            <el-input v-model="formSkyline.observerInformation" readonly style="line-height: 55px;width: 183px"/>
          </el-form-item>
          <el-form-item label="天际线颜色">
            <el-color-picker v-model="formSkyline.skylineColor" @change="sceneTool.skylineAnalysis.changeSkylineColor(formSkyline.skylineColor)"/>
          </el-form-item>
          <el-form-item label="障碍物高亮颜色">
            <el-color-picker v-model="formSkyline.highlightBarrierColor"/>
          </el-form-item>
          <el-form-item label="显示模式">
            <el-select v-model="formSkyline.displayMode" style="width: 183px" @change="sceneTool.skylineAnalysis.changeSkylineMode(formSkyline.displayMode)">
              <el-option label="线显示" value="polyline"/>
              <el-option label="面显示" value="polygon"/>
            </el-select>
          </el-form-item>
          <el-form-item label="分析半径（米）">
            <el-input-number v-model="formSkyline.skylineRadius" :step="10" style="width: 183px"/>
          </el-form-item>
          <el-form-item label-width="0" style="text-align: right">
            <div style="margin-right: 10px">
              <el-button type="primary" @click="skylineAnalysis">分析</el-button>
              <el-button type="warning" @click="skylineHighlightBarrier">高亮障碍物</el-button>
              <el-button @click="skylineAnalysisCancel">清除</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="阴影" name="eight" >
        <el-form ref="formShadow" :model="formShadow" label-width="125px" size="mini">
          <el-form-item label="日期选择">
            <el-date-picker v-model="formShadow.date" style="width: 195px"/>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-select v-model="formShadow.startTime" style="width: 195px">
              <el-option label="0:00" value="0"/>
              <el-option label="2:00" value="2"/>
              <el-option label="4:00" value="4"/>
              <el-option label="6:00" value="6"/>
              <el-option label="8:00" value="8"/>
              <el-option label="10:00" value="10"/>
              <el-option label="12:00" value="12"/>
              <el-option label="14:00" value="14"/>
              <el-option label="16:00" value="16"/>
              <el-option label="18:00" value="18"/>
              <el-option label="20:00" value="20"/>
              <el-option label="22:00" value="22"/>
            </el-select>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-select v-model="formShadow.endTime" style="width: 195px">
              <el-option label="0:00" value="0"/>
              <el-option label="2:00" value="2"/>
              <el-option label="4:00" value="4"/>
              <el-option label="6:00" value="6"/>
              <el-option label="8:00" value="8"/>
              <el-option label="10:00" value="10"/>
              <el-option label="12:00" value="12"/>
              <el-option label="14:00" value="14"/>
              <el-option label="16:00" value="16"/>
              <el-option label="18:00" value="18"/>
              <el-option label="20:00" value="20"/>
              <el-option label="22:00" value="22"/>
            </el-select>
          </el-form-item>
          <el-form-item label="底部高程（米）">
            <el-input-number v-model="formShadow.bottomAltitude" :min="0" style="width: 195px"/>
          </el-form-item>
          <el-form-item label="拉伸高度（米）">
            <el-input-number v-model="formShadow.extrudeHeight" :min="0" style="width: 195px"/>
          </el-form-item>
          <el-form-item style="text-align: right">
            <div style="width: 194px">
              <el-button type="primary" @click="shadowAnalysis">分析</el-button>
              <el-button @click="shadowAnalysisCancel">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'Index',
    data: function() {
      return {
        tabActiveName: 'second',
        formSlope: {
          minimumGrade: 0,
          maximumGrade: 78,
          displayStyle: 'ShowColorArrow',
          transparency: 0.5
        },
        formIsoline: {
          maximumVisibleElevation: 9000,
          minimumVisibleElevation: 0,
          isolineInterval: 100,
          lineColor: '#3EF5D8',
          displayMode: 'Line'
        },
        formFlood: {
          maximumVisibleElevation: 9000,
          minimumVisibleElevation: 1000,
          transparency: 80,
          theCurrentLevel: 0.0,
          speed: 1000
        },
        formSightline: {
          observerInformation: '',
          visibleColor: '#00C800',
          hideenColor: '#C80000',
          highlightBarrierColor: '#FFBA01'
        },
        formViewshed3D: {
          observerInformation: '',
          additionalHeight: 1.8,
          visualRange: 1.0,
          directionAngle: 0.0,
          elevationAngle: 0.0,
          horizontalFov: 90,
          verticalFov: 60,
          visibleColor: '#00C800',
          invisibleColor: '#C80000'
        },
        formProfile: {
          startingInformation: '',
          endInformation: ''
        },
        formSkyline: {
          observerInformation: '',
          skylineColor: '#C80000',
          highlightBarrierColor: '#FFBA01',
          displayMode: 'polyline',
          skylineRadius: 1000
        },
        formShadow: {
          date: Date.now(),
          startTime: '10',
          endTime: '14',
          bottomAltitude: 20,
          extrudeHeight: 20
        }
      }
    },
    methods: {

      slopChange(){
          this.sceneTool.terrainSlopeAnalysis.changeMinVisibleValue(this.formSlope.minimumGrade);
          this.sceneTool.terrainSlopeAnalysis.changeMaxVisibleValue(this.formSlope.maximumGrade);
          this.sceneTool.terrainSlopeAnalysis.changeDisplayMode(this.formSlope.displayStyle);
          this.sceneTool.terrainSlopeAnalysis.changeOpacity(this.formSlope.transparency);

      },

      /**
       * 坡度坡向分析
       */
      slopeAnalysis() {
        this.sceneTool.terrainSlopeAnalysis.analysis()
      },
      /**
       * 坡度坡向分析清理
       */
      slopeAnalysisCancel() {
        this.sceneTool.terrainSlopeAnalysis.remove()
      },
      /**
       * 等值线分析
       */
      isolineAnalysis() {
        this.sceneTool.isolineAnalysis.analysis(this.formIsoline.displayMode,
          this.formIsoline.lineColor,
          this.formIsoline.isolineInterval,
          this.formIsoline.maximumVisibleElevation,
          this.formIsoline.minimumVisibleElevation)
      },
      /**
       * 等值线清理
       */
      isolineAnalysisCancel() {
        this.sceneTool.isolineAnalysis.remove()
      },
      /**
       * 淹没分析
       */
      floodAnalysis() {

      },
      /**
       * 淹没分析清理
       */
      floodAnalysisCancel() {

      },
      /**
       * 通视分析
       */
      sightlineAnalysis() {
        this.sceneTool.sightlineAnalysis.analysis(this.formSightline.visibleColor, this.formSightline.hideenColor)
      },
      /**
       * 高亮障碍物
       */
      sightlineHighlightBarrier() {
        this.sceneTool.sightlineAnalysis.highlightBarrier(this.formSightline.highlightBarrierColor)
      },
      /**
       * 通视分析清理
       */
      sightlineAnalysisCancel() {
        this.sceneTool.sightlineAnalysis.remove()
      },
      /**
       * 可视域分析
       */
      viewshed3DAnalysis() {
        this.sceneTool.viewshed3DAnalysis.analysis(this.formViewshed3D)
      },
      /**
       * 可视域分析清理
       */
      viewshed3DAnalysisCancel() {
        this.sceneTool.viewshed3DAnalysis.remove()
        this.formViewshed3D = {
          observerInformation: '',
          additionalHeight: 1.8,
          visualRange: 1.0,
          directionAngle: 0.0,
          elevationAngle: 0.0,
          horizontalFov: 90,
          verticalFov: 60,
          visibleColor: '#00C800',
          invisibleColor: '#C80000'
        }
      },
      /**
       * 剖面分析
       */
      profileAnalysis() {

      },
      /**
       * 剖面分析清理
       */
      profileAnalysisCancel() {

      },
      /**
       * 天际线分析
       */
      skylineAnalysis() {
        this.sceneTool.skylineAnalysis.analysis(this.formSkyline)
      },
      /**
       * 天际线高亮障碍物
       */
      skylineHighlightBarrier() {
        this.sceneTool.skylineAnalysis.highlightBarrier(this.formSkyline.highlightBarrierColor)
      },
      /**
       * 天际线分析清理
       */
      skylineAnalysisCancel() {
        this.sceneTool.skylineAnalysis.remove()
        this.formSkyline = {
          observerInformation: '',
          skylineColor: '#C80000',
          highlightBarrierColor: '#FFBA01',
          displayMode: 'polyline',
          skylineRadius: 1000
        }
      },
      /**
       * 阴影分析
       */
      shadowAnalysis() {

      },
      /**
       * 阴影分析
       */
      shadowAnalysisCancel() {

      }
    },
    computed: {
      ...mapState({
        /**
         * 场景控件
         * @param state
         * @returns {any[]}
         */
        sceneViewer(state) {
          return state.eswyzt.sceneViewer
        },
        /**
         * 场景工具类
         * @param state
         * @returns {any[]}
         */
        sceneTool(state) {
          return state.eswyzt.sceneTool
        }
      })
    },
    mounted() {

    }
   
  }
</script>

<style scoped>
  .bottom-extras {
    margin-bottom: 5px;
    width: 100%;
  }

  .dividingline {
    margin: 5px 1px;
    background-color:#E4E7ED;
    height: 1px;
    border: none;
  }

  .font-extras{
    font-size: 14px;
    margin: 2px 0;
  }

  .el-form-item {
    margin: 4px 0
  }
</style>
